<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>仓库库存</span>
      </div>
      <div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="仓库">
            <el-select placeholder="请选择">
              <el-option label="原材料仓" value="rm"></el-option>
              <el-option label="成品仓" value="fg"></el-option>
              <el-option label="半成品仓" value="wip"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物料类型">
            <el-select placeholder="请选择">
              <el-option label="原材料" value="rm"></el-option>
              <el-option label="半成品" value="wip"></el-option>
              <el-option label="成品" value="fg"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search">查询</el-button>
            <el-button type="warning" icon="el-icon-download">导出</el-button>
          </el-form-item>
        </el-form>
        
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="warehouse" label="仓库" width="120"></el-table-column>
          <el-table-column prop="area" label="库区" width="120"></el-table-column>
          <el-table-column prop="location" label="库位" width="120"></el-table-column>
          <el-table-column prop="materialType" label="物料类型" width="100"></el-table-column>
          <el-table-column prop="totalItems" label="物料种类" width="100"></el-table-column>
          <el-table-column prop="totalQty" label="总数量" width="100"></el-table-column>
          <el-table-column prop="totalAmount" label="总金额" width="120"></el-table-column>
          <el-table-column prop="utilization" label="空间利用率" width="120">
            <template slot-scope="scope">
              <el-progress :percentage="scope.row.utilization" :color="getUtilizationColor(scope.row.utilization)"></el-progress>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status === '正常' ? 'success' : 'warning'">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleView(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'StkInventoryWh',
  data() {
    return {
      tableData: [
        {
          warehouse: '原材料仓',
          area: 'A区',
          location: 'A01-01',
          materialType: '原材料',
          totalItems: 15,
          totalQty: 1200,
          totalAmount: 45000,
          utilization: 75,
          status: '正常'
        },
        {
          warehouse: '原材料仓',
          area: 'A区',
          location: 'A01-02',
          materialType: '原材料',
          totalItems: 10,
          totalQty: 800,
          totalAmount: 32000,
          utilization: 60,
          status: '正常'
        },
        {
          warehouse: '成品仓',
          area: 'B区',
          location: 'B01-01',
          materialType: '成品',
          totalItems: 5,
          totalQty: 300,
          totalAmount: 120000,
          utilization: 90,
          status: '快满'
        },
        {
          warehouse: '半成品仓',
          area: 'C区',
          location: 'C01-01',
          materialType: '半成品',
          totalItems: 8,
          totalQty: 500,
          totalAmount: 75000,
          utilization: 40,
          status: '正常'
        }
      ]
    }
  },
  methods: {
    getUtilizationColor(percentage) {
      if (percentage < 50) return '#67c23a'
      if (percentage < 80) return '#e6a23c'
      return '#f56c6c'
    },
    handleView(row) {
      this.$message.success('查看仓库详情: ' + row.warehouse + ' ' + row.location)
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style> 